<template>
  <div class="home">
    <div class="header flex-y-center">
      <div class="logo">
        <img
          src="@/assets/images/logo.png"
          alt=""
        >
      </div>
      <van-search
        background="#1B82D2"
        class="flex-grow-1"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="header-top">
      <div class="header-bj"></div>
      <div class="slider-banner banner">
        <swiper
          :options="swiperOption"
          ref="mySwiper"
        >
          <swiperSlide
            v-for="(item, index) in banner"
            :key="index"
          >
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              :src="item.pic"
            />
          </swiperSlide>
          <div
            class="swiper-pagination"
            slot="pagination"
          ></div>
        </swiper>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav flex-grow">
      <div
        class="navitem"
        v-for="(item,i) in data.menus"
        :key="i"
      >
        <div class="imgbox">
          <img
            :src="item.pic"
            v-lazy="item.pic"
          />
        </div>
        <div class="name">
          {{ item.name }}
        </div>
      </div>
    </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      热门推荐
    </van-divider>
    <!-- 商品列表 -->
    <GoodList :list="info.bastList"/>
    <Basetabbar/>
  </div>
</template>

<script>
import { getindexdata } from "@/api/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import GoodList from '@/components/GoodList'

import "@/assets/css/swiper.min.css";
export default {
  name: 'Home',
  components: {
    swiper,
    swiperSlide,
    GoodList
  },
  data() {
    return {
      title: "测试网站",//初始化
      value: '请输入关键词',
      banner: [],
      swiperOption: {
        initialSlide: 1,
        speed: 1000,
        effect: "coverflow",
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 20,
        coverflowEffect: {
          rotate: 0, // 旋转的角度
          stretch: -10, // 拉伸   图片间左右的间距和密集度
          depth: 100, // 深度   切换图片间上下的间距和密集度
          modifier: 3, // 修正值 该值越大前面的效果越明显
          slideShadows: false // 页面阴影效果
        },
        observer: true,
        observeParents: true

      },
      data: {},//首页数据
      info: {},

    }
  },
  computed: {

  },
  //  html媒体标题
  metaInfo() {
    return {
      title: '首页',
      meta: [],
    };
  },
  mounted() {
    this.getdata()
  },
  created() {
  },
  methods: {
    getdata() {
      getindexdata().then(res => {
        console.log(res)
        this.banner = res.data.banner
        this.data = res.data
        this.info = res.data.info
      })
    },
    // 点击或是刷新改变当前title
    onclick() {
      this.title = 1
    }
  }
}
</script>
